<div class="content-heading">Full Calendar
    <div class="pull-right">
        <button type="button" class="btn btn-info btn-bloc" (click)="addRandomEvent()">Add random event</button>
    </div>
    <small>Drag and Drop events and tasks</small>
</div>
<!-- START row-->
<div class="calendar-app">
    <div class="row">
        <div class="col-lg-3 col-md-4">
            <!-- START panel-->
            <div class="panel panel-default">
                <div class="panel-heading">Full Calendar</div>
                <div class="panel-body">
                    <p>A JavaScript event calendar. Customizable and open source.</p>
                    <p>FullCalendar is a drag-n-drop jQuery plugin for displaying events on a full-sized calendar.</p>
                    <p>
                        <strong>A JavaScript event calendar. Customizable and open source.</strong>
                    </p>
                </div>
            </div>
            <div *ngIf="selectedEvent">
                <p>Selected:</p>
                <div class="box-placeholder">{{selectedEvent | json}}</div>
            </div>
            <div *ngIf="!selectedEvent">
                <p>Click calendar to show information</p>
            </div>
        </div>
        <div class="col-lg-9 col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">Calendar</div>
                <div class="panel-body">
                    <!-- START calendar-->
                    <div #fullcalendar class="calendar"></div>
                </div>
            </div>
        </div>
    </div>
</div>
